import { useState, useEffect } from 'react'
import {UnControlled as CodeMirror} from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
// import 'codemirror/lib/codemirror.js'
import './css/style.css'

//进行代码格式化
// import prettierBabel from 'prettier/parser-babel'
// import prettier from 'prettier';

// antd
import { Button, Tabs } from 'antd';
const { TabPane } = Tabs;

import { getSetting } from '../../../services/ant-design-pro/api'


const internationalization_son = () => {

    let [i18n, seti18n] = useState<any>({});
    useEffect(() => {
        getSetting().then(res => {
            console.log(res);
            seti18n(JSON.parse(res.i18n));
        })
    }, [])

    return (
        <div>
            {/* 国际化组件对对对 */}
           <Tabs type="editable-card">
                {
                    Object.keys(i18n).map((key: any) => {
                        const code = JSON.stringify(i18n[key], null, 2);
                        return (<TabPane tab={key} key={key}>
                            <CodeMirror
                                value={code}
                                options={{
                                    mode: 'xml',
                                    theme: 'material',
                                    lineNumbers: true,
                                  }}
                                  onChange={(editor, data, value) => {}}
                            />
                        </TabPane>
                        )
                    })
                }
            </Tabs>
            <Button key="3" style={{margin:'20px 0px 0px 33px'}} type="primary">
                    保存
            </Button>
        </div>
    )
}
export default internationalization_son